/**
  * PWS Tabs jQuery Plugin
  * Author: Alex Chizhov
  * Author Website: http://alexchizhov.com/pwstabs
  * GitHub: https://github.com/alexchizhovcom/pwstabs
  * Version: 1.2.1
  * Version from: 23.01.2015
  * Licensed under the MIT license
  */


@import 'crosass/crosass_init';


$pws_tabs_bgcolor_default : #9bd7d5;
$pws_tabs_bgcolor_hover : #70c5c2;
$pws_tabs_bgcolor_active : #fff;



@media only screen and (max-width: 60em){ // 960px
   
  .pws_tabs_container.pws_tabs_responsive{
    width: 100% !important;
    ul.pws_tabs_controll{
      width: 100%;
      li{
        vertical-align: top;
        text-align: center;
        a{
          margin: 0;
          font-size: 1em;
          line-height: 1.125em;
          overflow: hidden;
          i{
            display: block;
            margin: 0 0 5px 0;
          }
        }
      }
    } // EOF : pws_tabs_controll


    // ######################################################
    // Vertical Position
    // ######################################################
    &.pws_tabs_vertical{
    display: block;
    position: relative;
      &:after{
        @include clear;
      }

      ul.pws_tabs_controll{
        width: 100%;
        position: relative;
        float: none;
        li{
          display: inline-block;
          a {
            margin: 0;
          }
        }
      }

      .pws_tabs_list{
        position: relative;
        float: none;
      }

    } // EOF: pws_tabs_vertical
   

  } // EOF: pws_tabs_responsive

} // 960px

@media only screen and (max-width: 37.5em){ // 600px
   
  .pws_tabs_container.pws_tabs_responsive{
    width: 100% !important;
    position: relative;
    .pws_responsive_small_menu{
      width: 100%;
      height: 40px;
      background-color: #{$pws_tabs_bgcolor_default};
      display: block;
      a{
        width: 40px;
        height: 40px;
        display: block;
        overflow: hidden;
        color: #fff;
        font-size: 32px;
        font-size: 2em;
        text-align: center;
        padding: 3px 0 0 0;
        @include boxsizing('border-box');
        &:hover{
          background-color: #{$pws_tabs_bgcolor_hover};
        }
      }
    } // EOF : pws_responsive_small_menu

    ul.pws_tabs_controll.pws_tabs_menu_popup{
      display: block;
      position: absolute;
      overflow: hidden;
      top: 40px;
      left: 0;
      z-index: 99;
      margin: 0;
      padding: 0;
      @include boxsizing('border-box');
      li{
        display: block;
        float: none;
        a i{
          display: inline-block;
          margin: 0 3px 0 0;
          margin: 0 0.1875em 0 0;
        }
      }
    } // EOF : pws_tabs_menu_popup



    &.pws_tabs_rtl ul.pws_tabs_controll.pws_tabs_menu_popup li a i{
      display: inline-block;
      margin: 0 0 0 3px;
      margin: 0 0 0 0.1875em;
    }

  } // EOF: pws_tabs_responsive

} // 600px


.pws_tabs_container{
   width: 100%;

   ul.pws_tabs_controll{
    list-style: none;
    li{
      display: inline-block;
      a{
        display: block;
        background-color: #{$pws_tabs_bgcolor_default}; // 1.2.1
        padding: 15px 20px;
        padding: 0.9375em 1.25em; // @1.2.0
        text-decoration: none;
        color: #fff;
        margin-right: 3px;
        &:hover{
          background-color: #{$pws_tabs_bgcolor_hover};
        }
        i{
          margin-right: 8px;
        }
        &.pws_tab_noname i{
          margin-right: 0;
          margin-left: 0;
        }
        &.pws_tab_active{
          background-color: #{$pws_tabs_bgcolor_active};
          color: #505050;
        }
      }
    }
   } // EOF : pws_tabs_controll

} // EOF : pws_tabs_container


.pws_tabs_list{
  display: block;
  background-color: #fff;
  height: auto;
  padding: 20px;
  padding: 1.25em; // @1.2.0
  @include boxsizing('border-box');
  @include transition('all','.3s','ease-in-out','.3s');
  overflow: hidden;
  position: relative;
}
.pws_tab_single{
  position: absolute;
  top: 20px;
  padding-right: 20px;
  padding-right: 1.25em; // @1.2.0
  @include transition('all','.3s','ease-in-out','.0');
}


/**
  * ######################################################
  * Right To Left Styles
  * ######################################################
  */
.pws_tabs_container.pws_tabs_rtl{
  text-align: right;
  direction: rtl;
  ul.pws_tabs_controll li a{
    margin-right: 0;
    margin-left: 3px;
    i{ // @1.2.0
      margin-left: 8px;
      margin-right: 0;
    }
  }
  .pws_tab_single{
    padding-right: 0;
    padding-left: 20px;
    padding-left: 1.25em; // @1.2.0
  }
} // EOF : pws_tabs_rtl


/**
  * ######################################################
  * Vertical Position
  * ######################################################
  */
.pws_tabs_container.pws_tabs_vertical{
  display: block;
  position: relative;

  &:after{
    @include clear;
  }

  ul.pws_tabs_controll{
    width: auto;
    position: relative;
    float: left;
    li{
      display: block;
      a{
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 3px;
      }
    }
  }

  .pws_tabs_list{
    position: relative;
    float: left;
  }

} // EOF : pws_tabs_vertical


/**
  * ######################################################
  * Colors - Themes @1.2.0
  * ######################################################
  */

// PWS Tabs Flat Theme Colors
@mixin theme_flat($name,$defaultColor,$hoverColor, $activeColor){
  /**
  * ###########################
  * #{$name}
  * ###########################
  */
  .pws_tabs_container.pws_tabs_responsive.pws_theme_#{$name} .pws_responsive_small_menu{
    background-color: #{$defaultColor};
    a:hover{
      background-color: #{$hoverColor};
    }
  }
  .pws_tabs_container.pws_theme_#{$name} ul.pws_tabs_controll li a{
    background-color: #{$defaultColor};
    &:hover{
      background-color: #{$hoverColor};
    }
    &.pws_tab_active{
      background-color: #{$activeColor};
    }
  }
}


@include theme_flat('violet', '#c72c66','#a6164c','#fff');
@include theme_flat('green',  '#86c447','#539312','#fff');
@include theme_flat('yellow', '#fdb813','#ffa500','#fff');
@include theme_flat('gold',   '#f89827','#fa7b00','#fff');
@include theme_flat('orange', '#f15b42','#fd2e0b','#fff');
@include theme_flat('red',    '#e41937','#d70726','#fff');
@include theme_flat('purple', '#672e8d','#470871','#fff');
@include theme_flat('grey',   '#4d4d4f','#000000','#fff');

/**
  * ######################################################
  * Effect: none
  * ######################################################
  */
.pws_tabs_noeffect{
  .pws_tabs_list{
    @include transition('all','.1s','ease-in-out','0');
  }
  .pws_tab_single{
    @include transition_none;
  }
}
.pws_tabs_none_hide{
  display: none;
}
.pws_tabs_none_show{
  display: block;
}

/**
  * ######################################################
  * Effect: scale
  * ######################################################
  */
.pws_tabs_scale_hide{
  @include opacity(0);
  @include transform('scale(0.9)');
}
.pws_tabs_scale_show{
  z-index: 1;
  @include opacity(100);
  @include transform('scale(1)');
  @include transition_delay('.3s');
}

/**
  * ######################################################
  * Effect: slideleft
  * ######################################################
  */
.pws_tabs_slide_left_hide{
  @include transform('translateX(-100%)');
  @include opacity(0);
}
.pws_tabs_slide_left_show{
  @include transform('translateX(0px)');
  @include opacity(100);
  @include transition_delay('.3s');
}

/**
  * ######################################################
  * Effect: slideright
  * ######################################################
  */
.pws_tabs_slide_right_hide{
  @include transform('translateX(200%)');
  @include opacity(0);
}
.pws_tabs_slide_right_show{
  @include transform('translateX(0px)');
  @include opacity(100);
  @include transition_delay('.3s');

}

/**
  * ######################################################
  * Effect: slidetop
  * ######################################################
  */
.pws_tabs_slide_top_hide{
  @include transform('translateY(-100%)');
  @include opacity(0);
}
.pws_tabs_slide_top_show{
  @include transform('translateY(0px)');
  @include opacity(100);
  @include transition_delay('.3s');
}

/**
  * ######################################################
  * Effect: slidedown
  * ######################################################
  */
.pws_tabs_slide_down_hide{
  @include transform('translateY(200%)');
  @include opacity(0);
}
.pws_tabs_slide_down_show{
  @include transform('translateY(0px)');
  @include opacity(100);
  @include transition_delay('.3s');
}